<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

       
        // js中的对象的属性是无序的
        // ES6中对象的解构是通过对象属性名的方式进行取值的
        // 1.基本解构
        //     根据属性名取出对象中的对应值
        //     以属性名作为变量进行赋值定义

        let user={
            name:"tom",
            age:20,
            sex:"男"
        };
        // 不完全解构
        let {age,name}=user;
        console.log(age,name);

        // 2.完全解构

        let {username,ages,sexs}= {
            username:"tom",
            ages:20,
            sexs:"男"
        };
        console.log(username,ages,sexs);
        console.log("=====================");
        let objs={
            a:"alice",
            b:"baby",
            c:"cici",
            d:"david"
        };


        // 3.重命名解构
        let users={
            name:"coco",
            age:20,
            sex:"男"
        };
        let {name:myName,age:myAge,sex:mySex}=users;
        console.log(myName,myAge,mySex);
        console.log("=====================");

        // 4.剩余解构
        //     将剩余的key:value参数合并成一个新的对象
        //     剩余解构的语法必须位于解构表达式的最后一位
        let {a,d,...newObj}=objs;
        // let {a,...newObj,d}=objs;//报错
        console.log(a,d,newObj);

        // 5.模式匹配错误
        // g变量匹配不到，对应的值是undefined
        // h设置了默认值
        // i匹配到数据，并且同时设置了默认值，最终取的是匹配的值(匹配的值优先，默认值在后)
        let {g,h="哈哈",e:ee,i:myI="pig"}={e:"eric",f:"frank",i:"嘻嘻"};
        console.log(g,h,ee,myI);

        // 6.对象多层解构
        let data={
            status:true,
            msg:"今天星期一",
            film:{
                fname:"这个杀手不太冷",
                fyear:"2007",
                ftype:"悬疑剧"
            }
        };
        console.log(data.film.fname);
        console.log(data["film"]["fname"]);
        let {status,film:{fname}}=data;
        console.log(fname);

        //多元嵌套
        let datas={
            status2:true,
            msg:"今天星期一",
            lists:[
                {
                    a:1,
                    b:2
                },
                {
                    a:3,
                    b:4
                },
                {
                    a:5,
                    b:6
                }
            ]
        };

       let {lists:[,{b}]} =datas;
       console.log(b);


       let datas2=[
            {a:100,b:200},
            {a:300,b:400},
            {a:500,b:600},
       ];
       let [,{b:myb}]=datas2;
       console.log(myb);

        //7.为已经定义的变量进行对象的解构赋值
        let a1;
        let a2;
        let obj3={
            a1:"我是a1",
            a2:"我是a2"
        };
        ({a1,a2}=obj3);
        console.log(a1,a2);
    </script>
</head>
<body>
    
</body>
</html>